<template>
  <bm-overlay
    ref="customOverlay"
    :class="{sample: true}"
    pane="labelPane"
    @draw="draw">

    <el-radio-group @change="handleClick" v-model="radio">

      <div style="float: left">
        <el-radio style="padding-top: 10px" label="全部">{{'全部-'+this.stateNumber.all}}</el-radio>
      </div>
      <div style="float: left">
        <el-radio style="padding-top: 10px" label="行驶">{{'在线-'+this.stateNumber.on}}</el-radio>
      </div>
      <div style="float: left">
        <el-radio style="padding-top: 10px" label="离线">{{'离线-'+this.stateNumber.off}}</el-radio>
      </div>
      <div style="float: left">
        <el-radio style="padding-top: 10px" label="停车">{{'停车-'+this.stateNumber.park}}</el-radio>
      </div>

      <div style="float: left">
        <el-radio style="padding-top: 10px" label="熄火">{{'熄火-'+this.stateNumber.flameout}}</el-radio>
      </div>

    </el-radio-group>

  </bm-overlay>
</template>

<script>
export default ({
  data(){
  return {
    radio: '全部'
  }
  },
  props: ['text', 'position', 'active','stateNumber'],
  watch: {
    position: {
      handler () {
        this.$refs.customOverlay.reload()
      },
      deep: true
    }
  },
  methods: {
    handleClick (e) {

      this.$emit("selectChange",this.radio)


    },
    draw ({el, BMap, map}) {
      const {lng, lat} = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    }
  }
})
</script>

<style>
.sample {
  width: 120px;
  height: 140px;
  line-height: 40px;
  background: rgba(255,255,255);
  overflow: hidden;
  /*box-shadow: 0 0 5px #000;*/
  /*color: #fff;*/
  text-align: center;
  padding: 10px;
  position: absolute;
}
.sample.active {
  /*background: rgba(0,0,0,0.75);*/
  color: #fff;
}
</style>
